<template>
  <page-layout title="请柬列表">
    <a-card>
      <a-button @click="showModal()" type="primary" class="add-btn"
        >添加</a-button
      >
      <a-table
        :pagination="false"
        rowKey="id"
        :dataSource="data"
        :columns="columns"
      >
        <template #avatar_url="text">
          <my-image :src="text"></my-image>
        </template>
        <template #platform="text">{{ platformTypes[text] }}</template>
        <template #action="text,record">
          <div class="action-box">
            <status-switch
              :status="record.status"
              @click="changeStatus(record)"
            ></status-switch>
            <span @click="showModal(record)" class="primary">修改</span>
            <span @click="remove(record)" class="danger">删除</span>
          </div>
        </template>
      </a-table>
      <my-pagination :payload="payload" :total="total" />
    </a-card>
    <a-modal
      :maskClosable="false"
      :destroyOnClose="true"
      :title="record.id ? '修改' : '添加'"
      v-model="visible"
      @ok="onSubmit"
      :width="800"
    >
      <a-form @submit.prevent="onSubmit" :form="form">
        <a-form-item v-bind="formItemLayout" label="标题">
          <a-input
            v-decorator="[
              'title',
              {
                initialValue: record.title || '',
                rules: [{ required: true, message: '标题' }]
              }
            ]"
            size="large"
            placeholder="请输入"
          ></a-input>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="副标题">
          <a-input
            v-decorator="[
              'sub_title',
              {
                initialValue: record.sub_title || '',
                rules: [{ required: true, message: '副标题' }]
              }
            ]"
            size="large"
            placeholder="请输入"
          ></a-input>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="作者">
          <a-input
            v-decorator="[
              'author',
              {
                initialValue: record.author || '',
                rules: [{ required: true, message: '作者' }]
              }
            ]"
            size="large"
            placeholder="请输入"
          ></a-input>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="封面">
          <upload-qn
            v-decorator="[
              'cover',
              {
                initialValue: record.cover || []
              }
            ]"
          ></upload-qn>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="分类">
          <a-select
            :getPopupContainer="trigger => trigger.parentNode"
            v-decorator="[
              'cate_id',
              {
                initialValue: record.cate_id || 0,
                rules: [{ required: true, message: '分类' }]
              }
            ]"
            size="large"
            placeholder="请输入"
          >
            <a-select-option v-for="item in cateList" :key="item.id">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item v-bind="formItemLayout" label="平台">
          <a-select
            v-decorator="[
              'platform',
              {
                initialValue: record.platform || '',
              }
            ]"
            size="large"
            placeholder="请输入"
          >
            <a-select-option v-for="(item, key) in platformTypes" :key="key">{{item}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="模块">
          <a-select
            v-decorator="[
              'module',
              {
                initialValue: record.module || ''
              }
            ]"
            size="large"
            placeholder="请输入"
          >
            <a-select-option v-for="(item, key) in questionTypes" :key="key">{{item}}</a-select-option>
          </a-select>
        </a-form-item>-->
        <!-- <a-form-item v-bind="formItemLayout" label="推荐">
          <a-select
            v-decorator="[
              'is_recommend',
              {
                initialValue: record.is_recommend || 0,
                rules: [{ required: true, message: '推荐' }]
              }
            ]"
            size="large"
            placeholder="请输入"
          >
            <a-select-option :value="0">否</a-select-option>
            <a-select-option :value="1">是</a-select-option>
          </a-select>
        </a-form-item>-->
        <a-form-item v-bind="formItemLayout" label="日期">
          <a-date-picker
            :getPopupContainer="trigger => trigger.parentNode"
            format="YYYY-MM-DD HH:mm:ss"
            v-decorator="[
              'date',
              {
                initialValue: record.date || now,
                rules: [{ required: true, message: '日期' }]
              }
            ]"
            size="large"
            placeholder="请输入"
          ></a-date-picker>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="内容">
          <editor
            :val="record.content"
            v-decorator="[
              'content',
              {
                initialValue: record.content || '',
                rules: [{ required: true, message: '内容' }]
              }
            ]"
          ></editor>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="排序">
          <a-input-number
            v-decorator="[
              'sort',
              {
                initialValue: record.sort || '',
                rules: [{ required: true, message: '排序' }]
              }
            ]"
          ></a-input-number>
        </a-form-item>
      </a-form>
    </a-modal>
  </page-layout>
</template>

<script>
import moment from "moment";
import * as Api from "@/api/article";
import { platformTypes, questionTypes } from "@/constants/article";

const columns = [
  { title: "编号", dataIndex: "id" },
  { title: "标题", dataIndex: "title" },
  { title: "副标题", dataIndex: "sub_title" },
  { title: "作者", dataIndex: "author" },
  { title: "分类", dataIndex: "cate" },
  {
    title: "模块",
    dataIndex: "platform",
    scopedSlots: { customRender: "platform" }
  },
  // { title: "最后分享时间", dataIndex: "share_last_time" },
  // { title: "分享次数", dataIndex: "share_num" },
  // { title: "是否推荐", dataIndex: "is_recommend" },
  { title: "排序", dataIndex: "sort" },
  { title: "创建时间", dataIndex: "created_at" },
  { title: "更新时间", dataIndex: "updated_at" },
  { title: "操作", scopedSlots: { customRender: "action" } }
];

export default {
  data() {
    return {
      now: moment(),
      form: this.$form.createForm(this),
      visible: false,
      record: {},
      columns,
      payload: this.getPayload(),
      total: 0,
      data: [],
      platformTypes,
      questionTypes,
      cateList: []
    };
  },
  mounted() {
    this.fetchCate();
    this.fetchData();
  },
  methods: {
    async fetchCate() {
      const res = await Api.cate({ platform: "app-invitation" });
      this.cateList = res.list;
    },
    async fetchData(payload) {
      this.payload = { ...this.payload, ...payload };
      const res = await Api.list(this.payload);
      const { list, total } = res;
      this.data = list;
      this.total = total;
    },
    remove({ id }) {
      this.$confirm({
        title: "请确认",
        content: "删除后将不能恢复",
        onOk: async () => {
          await Api.remove(id);
          this.$message.success("删除成功");
          this.data = this.data.filter(item => item.id !== id);
        }
      });
    },
    async changeStatus(record) {
      await Api.changeStatus(record);
      this.$set(record, "status", record.status ? 0 : 1);
    },
    showModal(record = {}) {
      const r = { ...record };
      if (r.id) {
        r.cover = [
          {
            url: record.cover_url,
            path: record.cover
          }
        ];
        r.date = r.date ? moment(r.date) : moment();
      }
      this.record = r;
      this.$nextTick(() => {
        this.visible = true;
      });
    },
    onSubmit() {
      this.form.validateFields(async (err, v) => {
        if (err) return;
        const values = { ...v };
        const { id } = this.record;
        values.cover =
          values.cover && values.cover.length ? values.cover[0].path : "";
        const cateTarget = this.cateList.find(
          item => item.id === values.cate_id
        );
        if (cateTarget) {
          values.cate = cateTarget.name;
          values.platform = cateTarget.platform;
          values.module = cateTarget.module;
        }
        values.date = values.date.format("YYYY-MM-DD HH:mm:ss");

        if (id) {
          values.id = id;
          await Api.update(values);
          this.$message.success("更新成功");
        } else {
          await Api.add(values);
          this.$message.success("添加成功");
        }
        this.visible = false;
        this.fetchData();
      });
    }
  }
};
</script>

<style></style>
